<template>
  <div class="order">
    <router-link
      to=""
      class="flexbox order-header"
    >
      <div class="flexbox-item order-header-title">
        <h3>{{order.status.text}}</h3>
        <p
          v-for="text in order.mark"
          :key="text"
        >{{text}}</p>
      </div>
      <div class="flexbox-item order-header-status">
        <img :src="statusImageUrl" />
      </div>
    </router-link>
    <van-cell-group
      class="van-cell-address"
      v-if="address"
    >
      <van-cell
        :title="address.name+' '+address.mobile"
        icon="location"
        :label="address.detail"
      />
    </van-cell-group>
    <div class="van-card-goods-tidy mt10">
      <van-card
        :title="goods.name"
        :desc="goods.sku"
        :num="goods.number"
        :price="goods.price"
        centered
        :thumb="goods.cover"
        v-for="goods in order.goods"
        :key="goods.id"
        class="van-hairline-bottom"
      />
    </div>

    <van-cell-group class="order-money mt10">
      <van-cell
        title="订单金额"
        label="免运费"
      >
        <span class="price-cny font-gray">{{order.amount}}</span>
      </van-cell>
      <van-cell title="应付金额：">
        <span class="price-cny">{{order.pay}}</span>
      </van-cell>
    </van-cell-group>

    <van-cell-group class="van-cell-text-list mt10">
      <van-cell
        title="下单日期"
        :value="order.order_time"
      />
      <van-cell
        title="订单编号"
        :value="order.order_no"
      />
      <van-cell
        title="收货时间"
        value="不限送货时间"
      />
      <van-cell
        title="发票抬头"
        value="个人"
      />
      <van-cell
        title="发票类型"
        value="电子发票"
      />
    </van-cell-group>

    <van-submit-bar
      class="van-hairline--top"
      :price="order.pay*100"
      button-text="立即付款"
      label="应付金额："
      button-type="warning"
      @submit="showPaymentControl"
      v-if="order.status.code==0 || order.status.code==10"
    >
      <van-button
        @click="onClickCancel"
        class="btn-cancel"
      >取消订单</van-button>
      <span slot="tip">
        如未在订单过期前付款系统将自动取消订单
      </span>
    </van-submit-bar>

    <van-goods-action
      class="van-action-flex van-hairline--top"
      v-else-if="order.status.code==20"
    >
      <div class="van-action-flex__item">
        <van-button @click="pushWeblink(order.service)">联系客服</van-button>
      </div>
      <div class="van-action-flex__item">
        <van-button
          type="warning"
          @click="onClickConfirm"
        >
          确认收货
        </van-button>
      </div>
    </van-goods-action>
    <div class="placeholder"></div>
  </div>
</template>
<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Card,
  Button,
  Panel,
  NoticeBar,
  Dialog,
  SubmitBar,
  GoodsAction
} from 'vant'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Panel.name]: Panel,
    [Card.name]: Card,
    [Button.name]: Button,
    [NoticeBar.name]: NoticeBar,
    [Dialog.name]: Dialog,
    [SubmitBar.name]: SubmitBar,
    [GoodsAction.name]: GoodsAction
  },
  data () {
    return {
      order: {
        goods: [],
        content: '',
        status: {
          code: -1,
          label: 'status_default',
          text: ''
        }
      }
    }
  },
  created () {
    let id = this.$route.params.id
    console.log(id)
    this.axios
      .get('/shop/order/' + id)
      .then(response => {
        this.order = response.data
      })
      .catch(function (error) {
        console.log(error)
      })
  },

  computed: {
    address () {
      return this.order.address
    },
    statusImageUrl () {
      return require('../../assets/icons/order/' +
        this.order.status.code +
        '.png')
    }
  },
  methods: {
    submitForm () {
      this.axios
        .get('/site/index')
        .then(response => {
          this.msg = response.data.msg
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onClickConfirm () {
      this.$dialog
        .confirm({
          message:
            '确认收货前请确认已收到商品，如未收到商品快递请不要进行此操作'
        })
        .then(() => {
          this.axios
            .post('/shop/order/confirm', { id: this.order.id })
            .then(response => {
              this.order = response.data
            })
            .catch(function (error) {
              console.log(error)
            })
        })
        .catch(() => {
          // on cancel
        })
    },
    onClickCancel () {
      this.$dialog
        .confirm({
          message: '您确认要取消当前订单吗？'
        })
        .then(() => {
          this.axios
            .post('/shop/order/cancel', { id: this.order.id })
            .then(response => {
              this.$toast(response.data.msg)
              if (response.data.status) {
                this.$router.push({
                  name: 'order/list/:type',
                  params: {
                    type: 'all'
                  }
                })
              }
            })
        })
        .catch(() => {
          // on cancel
        })
    },
    showPaymentControl () {
      let id = this.order.id
      console.log('调用原生支付弹框，支付订单ID：' + id)
      this.jsBridge.showPaymentControl(
        {
          id: id,
          scope: 'shop'
        },
        response => {
          if (response.status) {
            console.log('已调起原生支付框')
          } else {
            this.$toast('支付发起失败，请重试~')
          }
          this.showSubmiting = false
        }
      )
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.order-header {
  height: 110px;
  background: #f37d0f;
  &-title {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    text-align: left;
    padding-left: 40px;
    color: #fff;
    h3 {
      opacity: 0.98;
      margin: 0;
      padding-bottom: 5px;
      font-weight: 300;
      font-size: 14px;
    }
    p {
      opacity: 0.7;
      margin: 2px 0 0;
      font-weight: 300;
      font-size: 12px;
    }
  }
  &-status {
    padding-right: 10px;
    img {
      width: 100%;
      height: auto;
    }
  }
}

.order-money {
  /deep/ .van-cell {
    &__label {
      padding-top: 8px;
    }
    &:not(:last-child)::after {
      left: 0;
    }
    &:last-child {
      background: #fafafa;
    }
  }
}

.van-action-flex {
  background: #f5f5f5;
}

/deep/ .van-submit-bar {
  background: #f5f5f5;
  .order-amount {
    text-align: left;
    font-size: 16px;
  }
  &__bar {
    padding-right: 10px;
  }
  .btn-cancel {
    border: none;
    font-size: 12px;
    color: #aaa;
    width: auto;
    &::before {
      display: none;
    }
  }
  button {
    border-radius: 3px;
    height: 34px;
    line-height: 32px;
    font-size: 14px;
  }
  & ~ .placeholder {
    height: 100px;
  }
}
</style>
